<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录页面</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .body{
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: "Lato",sans-serif;
            font-weight: 300;
            background: linear-gradient(to left bottom,#f7d6d6,#e1c9c9,#cab6b6,#b3a0a0,#b39c9c);
        }
        .icon-right{
            left: 20px;
            top: -60px;
            position: absolute;
        }
        .icon-left{
            right: 20px;
            top: -60px;
            position: absolute;
        }
        .login-div{
            filter: blur(0.4px);
            width: 430px;
            height: 700px;
            padding: 60px 35px 35px 35px;
            border-radius: 10px;
            background: radial-gradient(circle,#f68585,#f69999,#f6a6a6,#f9abab,#f6bcbc);
            box-shadow: /* bottom shadow */0px 20px 20px rgba(245, 142, 142, 0.2),0px 5px 10px rgba(245, 145, 145, 0.2),
                /* long bottom shadow */0px 70px 50px rgba(247, 149, 149, 0.4),
                /* right shadow */30px 50px 50px rgba(241, 139, 139, 0.2),
                /* left shadow */-30px 50px 50px rgba(245, 144, 144, 0.2),
                /* right inset */inset 20px 0px 60px rgba(245, 127, 127, 0.1),
                /* left inset */inset -20px 0px 60px rgba(243, 140, 140, 0.1);
        }
        .logo{
            background-color: gainsboro;
            height: 125px;
            width: 125px;
            border-radius: 50%;
            margin: 20px auto;
            /*box-shadow: 3px 3px 4px rgb(183, 87, 87);*/
        }

        .title{
            text-align: center;
            font-size: 28px;
            padding-top: 24px;
            letter-spacing: 0.5px;
        }
        .sub-title{
            text-align: center;
            font-size: 15px;
            padding-top: 7px;
            letter-spacing: 3px;
            font-weight: bold;
        }
        .fields{
            width: 100%;
            padding: 100px 5px 30px 5px;
        }

        .fields input{
            border: none;
            outline: none;
            background: none;
            font-size: 18px;
            font-family: "Lato",sans-serif;
            color: black;
            padding: 10px 10px 10px 5px;
        }
        .username,.password{
            display: block;
            border-bottom: 1px solid white;
            margin-bottom: 30px;
        }

        ::placeholder{
            color: white;
            opacity: 1;
            font-size: 20px;
            font-weight: 300;
        }

        ::-ms-input-placeholder{
            color: white;
            font-size: 20px;
            font-weight: 300;
        }

        .signin-button{
            margin-bottom: -30px;
            outline: none;
            border: none;
            cursor: pointer;
            width: 100%;
            height: 60px;
            border-radius: 5px;
            font-size: 22px;
            font-family: "Lato",sans-serif;
            color: white;
            text-align: center;
            letter-spacing: 1px;
            background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
        }

        .signin-button:hover{
            background:radial-gradient(circle,#2fdbb6,#32d6b3,#32c9a8,#36c7a7,#38bb97);
        }

        .signin-button:active{
            background:radial-gradient(circle,#1da88a,#1ea084,#229c82,#23947b,#238d76);
        }

        .link{
            padding-top: 20px;
            text-align: center;
        }

        .link a{
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
        .fields svg{
            height: 22px;
            margin-bottom: -3px;
            margin-right: 10px;
        }
    </style>
</head>
    <body class="body">
        <div class="login-div">
            <div class="logo"><svg t="1673180792965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3273" width="125" height="110"><path d="M819.292 623.785c-40.844-40.844-88.387-72.547-140.151-94.102 69.587-51.392 114.809-133.97 114.809-226.921 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.221 175.529 114.809 226.921-51.762 21.555-99.308 53.26-140.151 94.102-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 175.385 0 318.068 142.685 318.068 318.068 0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-116.081-45.204-225.211-127.284-307.292zM512 137.32c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442-165.442-74.218-165.442-165.442 74.218-165.442 165.442-165.442z" p-id="3274" fill="#707070"></path></svg></div>
            <div class="title">登录界面</div>
            <div class="sub-title">欢迎</div>
            <select class="form-select" id="choose" name="choose">
                <option value = "1">登录为学生</option>
                <option value = "2">登录为教师</option>
                <option value = "3">登录为管理员</option>
            </select>
            <div class="fields">
                <div class="username"><svg xmlns="http://www.w3.org/2000/svg" height="1em"
                                           viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path
                            d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
                </svg>
                    <input type="username" id="username" class="user-input" placeholder="Username"></div>
                <div class="password"><svg xmlns="http://www.w3.org/2000/svg" height="1em"
                                           viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path
                            d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H392.6c-5.4-9.4-8.6-20.3-8.6-32V352c0-2.1 .1-4.2 .3-6.3c-31-26-71-41.7-114.6-41.7H178.3zM528 240c17.7 0 32 14.3 32 32v48H496V272c0-17.7 14.3-32 32-32zm-80 32v48c-17.7 0-32 14.3-32 32V480c0 17.7 14.3 32 32 32H608c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32V272c0-44.2-35.8-80-80-80s-80 35.8-80 80z" />
                </svg>
                    <input type="password" id="password" class="pass-input" placeholder="Password"></div>
            </div>
            <button type="button" class="signin-button" onclick="login()">登  录</button>
            <div class="link"><a href="https://reg.163.com/naq/findPassword">忘记密码?</a></div>
        </div>

    <script src="/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        function login(){
            var name=$("#username").val();
            var password=$("#password").val();
            var choose=$("#choose").val();
            $.ajax({
                url:"/loginCheck",
                data:{
                    username:name,
                    password:password,
                    choose:choose,
                }
            }).done(function(rs){
                if (rs===1){
                    window.location.href="/student/studentScreen";
                }else if (rs===2){
                    window.location.href="/teacher/teacherScreen";
                }else if (rs===3) {
                    window.location.href="/administrator/administratorScreen"
                } else {
                    alert("错误，请检查您输入的用户名与密码。");
                }
            })
        }


    </script>
    </body>
</html>